<template>
  <div>
    <Form
      :select-show="false"
      oneitem="区域搜索"
      :total-count="totalCount"
      :total-page="totalPage"
      :page-index="pageIndex"
      :search-list="regionList"
      @changeList="changeList"
      @newCreateFn="newCreateFn"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column prop="date" label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="name" label="区域名称" />
        <el-table-column prop="nodeCount" label="点位数" />
        <el-table-column prop="remark" label="备注说明" />
        <el-table-column prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" style="color:red" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <el-dialog :title="title" :visible.sync=" regionVisible" width="630px" @closed="regionInfoClose">
      <el-form ref="regionForm" :model="regionForm" :rules="regionRules">
        <el-form-item label="区域名称：" prop="regionName">
          <el-input
            v-model="regionForm.regionName"
            type="text"
            autocomplete="off"
            maxlength="15"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="备注说明：" prop="remark">
          <el-input
            v-model="regionForm.remark"
            type="textarea"
            autocomplete="off"
            maxlength="40"
            show-word-limit
            placeholder="请输入备注（不超过40字）"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button id="buttom2" @click="regionVisible=false">取 消</el-button>
        <el-button id="buttom1" type="primary" @click="addRegion">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="区域详情" :visible.sync="regionInfoVisible" width="630px">
      <el-form status-icon>
        <el-form-item label="区域名称：">
          <span>{{ regionInfoName }}</span>
        </el-form-item>
        <el-form-item label="包含点位：">
          <el-table
            :data="nodeList"
            style="width: 70%"
          >
            <el-table-column
              label="序号"
              width="100"
              type="index"
            />
            <el-table-column
              prop="name"
              label="点位名称"
              width="150"
            />
            <el-table-column
              prop="vmCount"
              label="设备数量"
            />
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { regionSearch, addRegion, nodeSearch, regionInfo, editRegionInfo, delRegion } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      pageIndex: 1,
      regionList: [], // 列表
      totalPage: null,
      totalCount: null,
      regionVisible: false,
      regionForm: {
        regionName: '',
        remark: ''
      },
      regionRules: {
        regionName: [
          { required: true, message: '请输入' }
        ],
        remark: [
          { required: true, message: '请输入' }
        ]
      },
      // 区域详情
      regionInfoName: null,
      regionInfoVisible: false,
      nodeList: null// 点位详情
    }
  },
  computed: {
    title() {
      return this.regionForm.id ? '修改区域' : '新增区域'
    }
  },
  created() {
    this.regionFn()
  },
  methods: {
    // 列表
    async regionFn(pageIndex, name) {
      const res = await regionSearch({
        pageIndex,
        name
      })
      console.log(res)
      this.regionList = res.data.currentPageRecords
      this.totalPage = res.data.totalPage
      this.totalCount = res.data.totalCount
    },
    indexMethod(index) {
      return this.pageIndex === 1 ? index + 1 : Number(`${this.pageIndex - 1}${index}`) + 1
    },
    changeList(page) {
      this.pageIndex = page
      // console.log(this.pageIndex)
      this.regionFn(this.pageIndex)
    },
    newCreateFn() {
      this.regionVisible = true
    },
    // 新增
    addRegion() {
      this.$refs.regionForm.validate(async(valid) => {
        if (!valid) return
        if (this.regionForm.id) {
          const res = await editRegionInfo(this.regionForm.id, this.regionForm)
          if (!res.data) {
            this.$message({
              type: 'error',
              message: this.title + '失败'
            })
          }
        } else {
          await addRegion(this.regionForm)
        }
        await this.regionFn(this.pageIndex)
        this.$message({
          type: 'success',
          message: this.title + '成功'
        })
        this.regionVisible = false
        this.$refs.regionForm.resetFields()
      })
    },
    async  handleClick(row) {
      this.regionInfoName = row.name
      const res = await nodeSearch({ regionId: row.id })
      this.nodeList = res.data.currentPageRecords
      this.regionInfoVisible = true
    },
    // 修改
    async edit(row) {
      this.regionVisible = true
      const res = await regionInfo(row.id)
      res.data.regionName = res.data.name
      this.regionForm = res.data
      // await this.regionFn(this.pageIndex)
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delRegion(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(res => {
          this.$message.error(res.response.data)
        })
        this.regionFn(this.pageIndex)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭
    regionInfoClose() {
      this.channelInfo = null
      this.$refs.regionForm.resetFields()
    },
    searchResultFn(val) {
      // console.log(val)
      const name = val.taskCode
      if (!name.trim()) {
        this.regionFn()
      } else {
        this.regionFn(1, name)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#buttom1 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  border: none;
}

#buttom2 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background-color: #fbf4f0 !important;
  border: none;
  color: #655b56 !important;
}
// ::v-deep.el-form-item__error {
//   padding-left: 150px;
// }
</style>
